<template>
  <div class="orderList">
    <el-breadcrumb separator="/" style="margin-bottom: 20px;">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" style="line-height: 0; text-align: left;">
      <!-- 搜索框 -->
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="6">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchKeyword"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-col>
      </el-row>
      <el-table :data="orderDataList" border style="width: 100%">
        <el-table-column label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="order_number" label="订单编号">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格">
        </el-table-column>
        <el-table-column prop="pay_status" label="是否付款">
          <template slot-scope="scope">
            <!-- {{ scope.row.pay_status === 1 ? '已付款' : '未付款' }} -->
            <el-button type="primary" :type="scope.row.pay_status === 1 ? 'primary' : 'danger'">
              {{ scope.row.pay_status === 1 ? '已付款' : '未付款' }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货">
        </el-table-column>
        <el-table-column prop="create_time" label="下单时间">
          <template slot-scope="scope">
            {{ scope.row.create_time | timeFormat }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 点击事件 -->
            <el-button type="primary" size="mini" @click="handleOrderEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 40px;">
        <el-pagination @size-change="handlePageSizeChange" @current-change="handleCurrentPageChange" :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </div>
    </el-card>
    <!-- 编辑弹出框 -->
    <el-dialog title="修改地址" :visible.sync="isAddressEditDialogVisible" width="30%" center style="line-height: 0;">
      <div class="block">
        <span class="demonstration">省市区/县</span>
        <el-cascader v-model="selectedAddress"></el-cascader>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAddressEdit">取 消</el-button>
        <el-button type="primary" @click="confirmAddressEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import http from '@/mixins/http'
export default {
  mixins: [http()],
  data() {
    return {
      orderDataList: [],
      currentPage: 1,
      totalCount: 0,
      pageSize: 10,
      isAddressEditDialogVisible: false,
      searchKeyword: '',
      selectedAddress: [],
      currentEditOrder: null,
      paginationParams: {
        pageSize: 10,
        currentPage: 1,
        searchKeyword: ''
      }
    }
  },
  created() {
    this.fetchOrderList()
  },
  methods: {
    // 封装分页参数
    getPaginationParams() {
      return {
        pagesize: this.paginationParams.pageSize,
        pagenum: this.paginationParams.currentPage,
        query: this.paginationParams.searchKeyword
      }
    },
    async fetchOrderList() {
      try {
        const params = this.getPaginationParams()
        const res = await this.$httpGet('/orders', params)
        console.log(res);
        if (res && res.data && res.data.data) {
          this.orderDataList = res.data.data.orders || []
          this.totalCount = res.data.data.total || 0
        } else {
          throw new Error('返回数据格式不正确')
        }
      } catch (error) {
        console.error('获取订单列表失败:', error)
        this.$message.error(error.message || '数据加载失败')
        return null
      }
    },
    handlePageSizeChange(newSize) {
      this.paginationParams.pageSize = newSize
      this.currentPage = 1
      this.fetchOrderList()
    },
    handleCurrentPageChange(newPage) {
      this.paginationParams.currentPage = newPage
      this.fetchOrderList()
    },
    handleSearch() {
      this.paginationParams.searchKeyword = this.searchKeyword
      this.currentPage = 1
      this.fetchOrderList()
    },
    handleOrderEdit(row) {
      this.currentEditOrder = row
      this.isAddressEditDialogVisible = true
    },
    cancelAddressEdit() {
      this.isAddressEditDialogVisible = false
      this.selectedAddress = []
    },
    async confirmAddressEdit() {
      try {
        if (!this.currentEditOrder) {
          throw new Error('未选择要编辑的订单')
        }
        // 这里需要根据实际接口修改
        const res = await this.$httpPost('/updateOrderAddress', {
          orderId: this.currentEditOrder.id,
          address: this.selectedAddress
        })
        if (res && res.data && res.data.code === 200) {
          this.$message.success('地址修改成功')
          this.isAddressEditDialogVisible = false
          this.selectedAddress = []
          this.fetchOrderList()
        } else {
          throw new Error(res.data.message || '地址修改失败')
        }
      } catch (error) {
        console.error('地址修改失败:', error)
        this.$message.error(error.message || '地址修改失败')
      }
    }
  },
  filters: {
    // 时间戳过滤
    timeFormat(time) {
      if (!time) return ''
      const date = new Date(time)
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      const second = date.getSeconds()
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    }
  }
}
</script>